<template>
  <div class="uploadFIle" v-loading="load">
      <div class="format">
            <!-- <el-button size="small" type="primary">点击上传</el-button> -->
            <el-button @click="templateDown">模板下载</el-button>
            
        </div>
      <div class="uploads">
          <el-upload
            class="upload-demo"
            action="/bpm/user/importData"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :limit="1"
            :on-success="success"
            :data = "{toUpdate:value}"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <div class="format">
               <el-button size="small" type="primary">点击上传</el-button>
                <!-- <el-button>模板下载</el-button> -->
                
            </div>
            

            <div slot="tip" class="el-upload__tip " style="display: flex;
    align-items: center;">
                    
                    <el-switch
                    v-model="value"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                    </el-switch>
                    <span>
                        用户名数据重复时是否更新
                    </span>
            </div>
            <div slot="tip" class="el-upload__tip">“用户名数据重复时是否更新”勾选时，如果用户名重复会更新之前的数据，反之跳过不更新数据。</div>
        </el-upload>
      </div>
        
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return {
            load:false,
            fileList: []
            ,value: true
        }
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      loading(bool = true) {
                
                const loading = this.$loading({
                lock: true,
                text: '',
                spinner: 'el-icon-loading',
                background: 'rgba(255, 255, 255, 0.7)'
                });
                if(!bool){
                    loading.close();
                }
            },
      templateDown(){
          this.load = true
        axios({
            url: '/bpm/user/importTemp',
            method: 'get',
            responseType: 'blob'
        }).then(res =>{
            // console.log(res.data)
            
            var a = document.createElement('a');
            a.download = 'temp.xlsx';
            a.href = window.URL.createObjectURL(new Blob([res.data]));
            a.click();
            this.load = false
        }); 
    },
    success(){
        this.$message({
            type: 'success',
            message: '导入成功!'
        });
    }
    }
    
}
</script>

<style scoped lang="less">
.uploadFIle{
    display:flex;
    margin:0 auto;
    // flex-direction: column;
    align-items: baseline;
    .uploads{
        margin-top:10rem;
        margin-left:10px;
        .format{
             display:flex;
        }
    }
}
</style>